<template>
<view class="swiper">
        <swiper
            :style="{height:height+'rpx'}"
            :indicator-dots="indicatorDots"
            :indicator-color="indicatorColor"
            :indicator-active-color="indicatorActiveColor"
            :autoplay="autoplay"
            :interval="interval"
            @change="durationChange">
      
         

          
                <swiper-item  v-for="(item,index) in newImag" :key="index" style="text-align: center;background:#fff" > 
                  
                      <image 
                         @tap="adLink(item)"
                          v-if="item.adPhotoUrl "
                          mode="aspectFill" 
                          :src="item.adPhotoUrl " 
                          :style="{height:height+'rpx',width:width+'rpx'}"
                          class="slide-image" />    

                     

                </swiper-item>
          

        </swiper>
        <!-- <view class="nums" v-if="imags.length > 1">{{current+1}}/{{newImag.length}}</view> -->
</view>        
</template>
<script>

 import adlink from '@/mixins/adLink'


 export default {
     mixins:[adlink],
     props:{
         height:{
            type: String,
            default:400
         },
         imags:{
             type:Array,
             default:[],
        
         },
         width:{
            type: String,
            default:'100%'
         }
     },
     computed:{
         newImag(){
          
             return this.imags
         }
     },
     data(){
         return {
                        'indicatorDots':false,
                        'autoplay':true,
                        'indicatorColor':'rgba(255,255,255,0,4)',
                        'indicatorActiveColor':'#fff',
                        'interval':5000,
                        'current':0
         }
         
     },
     methods:{
        durationChange(e){
           
                this.current = Number(e.detail.current)
        }
     }

     

   
    
 }   
</script>

<style lang="scss">
.swiper{
    
overflow: hidden;

    position: relative;
    z-index: 2;
    
   /deep/  .nums{
        position: absolute;
        bottom:10rpx;
        right:10rpx;
        color:#fff;
        font-size: 24rpx;
        background: rgba(0,0,0,.4);
        padding: 0 8px;
        border-radius: 18rpx;
        line-height: 36rpx;
        height:36rpx;
        
    }
    swiper {
            
         
          
        }
          image{
                width: 100%;
             
            }
}
   
</style>